import React from 'react'
import { connect } from 'react-redux'
import { Table, Icon } from 'semantic-ui-react'
import Styled from 'styled-components'
import Proptypes from 'prop-types'
import { projectLabelView as projectDuck } from 'ducks'

const StyledHeader = Styled(Table.HeaderCell)`
  padding-left: .5em !important; 
  padding-right: .2em !important; 
  padding-top: 13px !important;
`

const labelListHeader = ({
  isAllHide, hideAll, openModal, labelNumer,
}) => {
  const hideIconName = isAllHide ? 'hide' : 'unhide'
  const rightIconDisable = labelNumer === 0
  return (
    <Table.Header>
      <Table.Row>
        <StyledHeader collapsing width={1} />
        <StyledHeader collapsing width={6}>
          标签
        </StyledHeader>
        <StyledHeader collapsing width={6}>
          值
        </StyledHeader>
        <StyledHeader collapsing />
      </Table.Row>
    </Table.Header>
  )
}

labelListHeader.propTypes = {
  isAllHide: Proptypes.bool.isRequired,
  hideAll: Proptypes.func.isRequired,
  openModal: Proptypes.func.isRequired,
  labelNumer: Proptypes.number.isRequired,
}

const mapStateToProps = state => ({
  isAllHide: projectDuck.selectors.isAllHide(state),
  labelNumer: projectDuck.selectors.labelNumer(state),
})

const mapDispatchToProps = {
  hideAll: projectDuck.creators.actionToggleHideAll,
  openModal: projectDuck.creators.actionOpenDeleteModal,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(labelListHeader)
